<template>
  <el-form
    v-if="props"
    style="padding:20px"
    label-position="right"
    label-width="100px"
    :model="form"
  >
    <el-form-item
      v-for="(item,index) in props"
      :key="index"
      :label="item.label"
    >
      <el-input
        v-if="item.type === 'input'"
        v-model="form[item.prop]"
      />
      <el-select
        v-if="['select','mselect'].indexOf(item.type) !== -1"
        v-model="form[item.prop]"
        :multiple="item.type === 'mselect'"
      >
        <el-option
          v-for="option in item.options"
          :key="option.value"
          :label="option.label"
          :value="option.value"
        />
      </el-select>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  props: {
    config: {
      type: Object,
      default: undefined
    },
    value: {
      type: Object,
      default: undefined
    }
  },
  data () {
    return {
      form: {
        id: '',
        name: ''
      }
    }
  },
  computed: {
    props () {
      return this.config ? this.config.props : undefined
    }
  },
  methods: {
    init (node) {
      // this.recover(this.form, Object.assign({}, node))
      this.form = Object.assign({}, node)
    }
  },
  watch: {
    form: {
      handler (before, after) {
        if (this.value) {
          for (let [key, value] of Object.entries(this.form)) {
            if (key === 'name') {
              this.value.set(key, value)
              this.$emit('update-property')
            }
          }
        }
      },
      deep: true
    },
    'value.$attrs': {
      handler (value) {
        this.form = Object.assign({}, value)
      },
      immediate: true
    },
    value: {
      handler (value) {
        this.form = Object.assign({}, value)
      },
      immediate: true
    }
  }
}
</script>
